<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>欢迎光临-可心的秘密基地</title>
	
	<style>
	
		body {
			
			background: pink;
			overflow: hidden;
		}
span {
			position: absolute;
			    background: url(heart.png);
			    pointer-events: none;
			    
			    background-size: cover;
			    transform: translate(-50%, -50%);
			    animation: animate 2s linear infinite;
					}
		.container {
			margin: auto;
			margin-top: 50px;
			margin-bottom: 100px;
			width: 300px;
			height: 400px;
			position: relative;
		}

		.login-content {
			position: absolute;
			margin: auto;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			background-color: #c8bbc2;
			border: 1px solid rgba(0, 0, 0, 0.1);

		}

		.title {
			margin-bottom: 30px;
			text-align: center;
		}

		.checkbox {
			margin-bottom: 30px;
		}

		.login-info {
			width: 300px;
		}

p{
	display: inline-block;
	width: 60px;
	margin-left: 30px;
	text-align: justify;
	text-align-last: justify;
}
		
		

		.code_show {
			overflow: hidden;
		}

		.code_show p {
			display: block;
			float: left;
			margin-bottom: 5px;
			width: 75px;
		}

		.code_show a {
			display: block;
			float: left;
			margin-top: 5px;
			margin-left: 5px;
		}

		.code {
			font-style: italic;
			background-color: #c2b3ff;
			color: blue;
			font-size: 16px;
			letter-spacing: 2px;
			font-weight: bolder;
			float: left;
			cursor: pointer;
			padding: 0 0px;
			text-align: center;
		}

		#inputCode {
			width: 170px;
			height: 15px;
			text-align: justify;
			text-align-last: justify;
		}

		a {
			text-decoration: none;
			font-size: 15px;
			color: #288bc4;
			cursor: pointer;
		}

		a:hover {
			text-decoration: underline;
		}

		label {
			margin-left: 30px;
		}

		#Button {
			margin-top: 20px;
			margin-left: 120px;
		}
		@keyframes animate {
		    0% {
		        transform: translate(-50%, -50%);
		        opacity: 1;
		        filter: hue-rotate(0deg);
		    }
		 
		    100% {
		        transform: translate(-50%, -1000%);
		        opacity: 0;
		        filter: hue-rotate(360deg);
		    }
		}
	</style>
	</head>
	<body>
		<div class="container">
			<div class="login-content">
				<h2 class="title">欢迎光临-小窝</h2>
				<div class="login-info">
					<p>用户名:</p>
					<input type="text" id="username" placeholder="请输入用户名" /><br>
					<p>密码:</p>
					<input type="text" id="password" placeholder="请输入密码" />
				</div>
				<div>
					<div class="code_show">
						<p class="code" id="checkCode"></p>
						<a id="linkbt">看不清换一张</a>
					</div>
					<div class="input_code">
						<p for="inputCode">验证码:</p>
						<input type="text" id="inputCode" placeholder="请输入验证码" />
						<p id="text_show"></p>
					</div>
					<label class="checkbox">
						<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember me
					</label><br>
					<input id="Button" type="button" value="确定" onclick="http://blog.sina.com.cn/mleavs" />
				</div>
			</div>
		</div>
	
	<script>
		window.onload = function() {
			var res = getCode();

			function getCode() {
				var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
				var str = '';
				for (var i = 0; i < 6; i++) {
					var num = Math.round(Math.random() * (15 - 0) + 0);
					str += arr[num];
				}
				return str;
			}
			document.getElementById('checkCode').innerText = res;
			document.getElementById('linkbt').onclick = function() {
				document.getElementById('checkCode').innerText = getCode();
			}
			document.getElementById('Button').onclick = function() {
				var code = document.getElementById('checkCode').innerText;
				var inputCode = document.getElementById('inputCode').value;
				if (code != inputCode) {
					alert('您输入的验证码不正确');
					document.getElementById('inputCode').value = '';
					return false;
				}
			}
		}
		document.getElementById('Button').addEventListener('click',function(){
			var username = document.getElementById('username').value;
			var password = document.getElementById('password').value;
			if (username == 'xiaowo' && password == '000000'){
				window.location.href = 'xiaowo.html';
			}else{
				alert('抱歉，用户密码输入错误！');
			}
		})
		document.addEventListener('mousemove', (e) => {
		    let body = document.querySelector('body')
		    let heart = document.createElement('span')
		    let x = e.offsetX
		    let y = e.offsetY
		    heart.style.left = x + 'px'
		    heart.style.top = y + 'px'
		    let size = Math.random() * 10
		    heart.style.width = size + 'px'
		    heart.style.height = size + 'px'
		    body.appendChild(heart)
		    setTimeout(() => {
		        heart.remove()
		    }, 3000)
		})
	</script>
	</body>
</html>
